<!-- //首页 -->
<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="location">
        <uni-icons type="location" size="20" color="#333"></uni-icons>
        <text class="location-text">{{ currentCity }}</text>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="20" color="#666"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索非遗皮影" 
          v-model="searchKey" 
          class="search-input"
          @confirm="handleSearch"
        />
      </view>
      <view class="notification" @tap="checkNotification">
        <uni-icons type="notification" size="24" color="#333"></uni-icons>
        <view v-if="unreadCount" class="badge">{{ unreadCount }}</view>
      </view>
    </view>
    
    <!-- 轮播图区域 -->
    <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.imageUrl" mode="aspectFill" class="banner-image"/>
      </swiper-item>
    </swiper>
    
    <!-- 分类导航 -->
    <view class="category-section">
      <view 
        class="category-item" 
        v-for="(category, index) in categories" 
        :key="index" 
        @tap="navigateToCategory(category.name)"
      >
        <image :src="category.icon" mode="aspectFit" class="category-icon"/>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>
    
    <!-- 精品推荐 -->
    <view class="featured-section">
      <view class="section-header">
        <text class="section-title">精品推荐</text>
        <view class="more" @tap="viewMoreTuijian">
          <text class="more-text">查看更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <scroll-view scroll-x="true" class="featured-scroll">
        <view class="featured-list">
          <view 
            class="featured-item" 
            v-for="(item, index) in featuredProducts" 
            :key="index" 
            @tap="viewProduct(item.id)"
          >
            <image :src="item.imageUrl" mode="aspectFill" class="featured-image"/>
            <view class="featured-info">
              <text class="featured-name">{{ item.name }}</text>
              <text class="featured-price">¥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 文化传承区 -->
    <view class="culture-section">
      <view class="section-header">
        <text class="section-title">文化传承</text>
        <view class="more" @tap="viewMoreCulture">
          <text class="more-text">查看更多</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>
      <view class="culture-grid">
        <view 
          class="culture-item" 
          v-for="(item, index) in culturalItems" 
          :key="index" 
          @tap="viewCulture(item.id)"
        >
          <image :src="item.imageUrl" mode="aspectFill" class="culture-image"/>
          <view class="culture-info">
            <text class="culture-name">{{ item.title }}</text>
            <text class="culture-desc">{{ item.description }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import shuju from '../../../shuju.json';

// 定义数据类型
interface Banner {
  id: number;
  imageUrl: string;
}

interface Category {
  id: number;
  name: string;
  icon: string;
}

interface FeaturedProduct {
  id: number;
  name: string;
  price: number;
  description: string;
  details: string;
  craftsman: string;
  imageUrl: string;
}

interface CulturalItem {
  id: number;
  title: string;
  description: string;
  fullContent: {
    history: string;
    process: string[];
    features: string;
    significance: string;
    masters: {
      name: string;
      title: string;
      achievement: string;
    }[];
    introduction?: string;
    performanceElements?: string[];
    regionalStyles?: {
      title: string;
      content: string[];
    };
    modernDevelopment?: string;
    educationalValue?: string;
  };
  imageUrl: string;
}

// 响应式数据
const currentCity = ref('北京市');
const searchKey = ref('');
const unreadCount = ref(3); // 示例数据
const banners = ref<Banner[]>(shuju.banners);
const categories = ref<Category[]>(shuju.categories);
const featuredProducts = ref<FeaturedProduct[]>(shuju.featuredProducts);
const culturalItems = ref<CulturalItem[]>(shuju.culturalItems);

// 方法
const checkNotification = () => {
  uni.navigateTo({
    url: '/pages/notification/notification'
  });
};

const navigateToCategory = (categoryName: string) => {
  uni.navigateTo({
    url: `/pages/fenlei/fenlei?category=${encodeURIComponent(categoryName)}`
  });
};

const viewMoreFeatured = () => {
  uni.navigateTo({
    url: '/pages/product/list?type=featured'
  });
};

const viewMoreCulture = () => {
  uni.navigateTo({
    url: '/pages/culture/list'
  });
};

const viewMoreTuijian = () => {
  uni.switchTab({ url: '/pages/product/product' })
}

const viewProduct = (id: number) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${id}`
  });
};

const viewCulture = (id: number) => {
  uni.navigateTo({
    url: `/pages/culture/list?id=${id}`
  });
};

const handleSearch = () => {
  if (searchKey.value.trim()) {
    uni.navigateTo({
      url: `/pages/search/result?keyword=${encodeURIComponent(searchKey.value)}`
    });
  }
};

onMounted(() => {
  console.log('数据加载完成:', shuju);
});
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f7f7f7;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  padding: 6rpx 12rpx;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 24rpx;
}

.location-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 8rpx;
  max-width: 160rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  padding: 16rpx 24rpx;
  margin: 0 20rpx;
  transition: all 0.3s ease;
}

.search-box:active {
  background-color: #ebebeb;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  margin-left: 16rpx;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.notification {
  position: relative;
  padding: 8rpx;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
  transform: translate(25%, -25%);
  box-shadow: 0 2rpx 4rpx rgba(255, 77, 79, 0.2);
}

.banner-swiper {
  width: 750rpx;
  height: 360rpx;
  background: #fff;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 0 0 24rpx 24rpx;
}

.category-section {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.category-item:active {
  transform: scale(0.95);
}

.category-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 16rpx;
  border-radius: 24rpx;
}

.category-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.featured-section {
  margin: 20rpx 20rpx;
  background-color: #fff;
  padding: 30rpx 0;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 24rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background: #ff4d4f;
  border-radius: 4rpx;
}

.more-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 24rpx;
  border: none;
  line-height: 1;
  margin: 0;
}
 
.more-btn::after {
  border: none;
}
 
.more-text {
  font-size: 24rpx;
  color: #666;
  margin-right: 8rpx;
}

.featured-scroll {
  width: 100%;
}

.featured-list {
  display: flex;
  padding: 0 30rpx;
}

.featured-item {
  margin-right: 24rpx;
  width: 300rpx;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.featured-item:active {
  transform: scale(0.98);
}

.featured-image {
  width: 300rpx;
  height: 300rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.featured-info {
  margin-top: 16rpx;
  padding: 0 8rpx;
}

.featured-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.featured-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
  margin-top: 8rpx;
  display: block;
}

.culture-section {
  margin: 20rpx 20rpx;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.culture-grid {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.culture-item {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.culture-item:active {
  transform: scale(0.98);
}

.culture-image {
  width: 280rpx;
  height: 280rpx;
  object-fit: cover;
}

.culture-info {
  flex: 1;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.culture-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.culture-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>